<!--  -->
<template>
  <div class="collection-list">
    <template v-for="(item,index) in productList">
      <div class="collection-item flex justify-between aligin-center" :key="index" @click="$emit('tapProductItem',item)">
        <span
          :class="[editFlag?isSelected(item.f_id)?'circle-selected':'circle':'']"
          @click.stop="$emit('select',item)"
        ></span>
        <img class="product-img ml-10" :src="item.image" alt="">
        <div>
          <div class="mt-4 ellipsis-line2 title">{{item.name}}</div>
          <div class="progress-wrapper mt-10">
            <div class="progress" :style="{width:item.progress+'%'}"></div>
          </div>
          <div class="flex mt-18 justify-between aligin-center f-12">
            <div class="flex aligin-center">
              <span class="power"></span>
              <span>{{item.current}}</span>
            </div>
            <div class="flex aligin-center">
              <span class="receive-count"></span>
              <span>{{item.power}}</span>
            </div>
          </div>
          <div class="flex justify-between aligin-center mt-14">
            <template v-if="item.open_status==0">
              <span class="in-progress f-10 color-white flex aligin-center justify-center">进行中</span>
              <span class="copy f-10 color-gray flex aligin-center justify-center" @click.stop="copyUrl(item.url)">复制链接</span>
            </template>
            <template v-else>
              <span class="in-progress f-10 color-white flex aligin-center justify-center">即将开奖</span>
            </template>
          </div>
        </div>
        <div v-if="item.open_status" class="mask"></div>
      </div>
    </template>
     <div class="no-data" v-if="productList.length==0"></div>
  </div>
</template>

<script>
export default {
  props: {
    productList: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    collectList: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    editFlag: {
      type: Boolean,
      default: () => {
        return false;
      },
      required: true
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    // 复制链接
    copyUrl(url) {
      this.$copyText(url).then(
        e => {
          this.$toast("复制成功！");
        },
        e => {
          this.$notify(e);
        }
      );
    },
    isSelected(index) {
      let _index = this.collectList.find(item => {
        return item == index;
      });
      return _index === undefined ? false : true;
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin"); //引入公共css类
.collection-item {
  margin-bottom: 15px;
  position: relative;
  .product-img {
    height: 100px;
    width: 125px;
    border-radius: 5px;
  }
  .title {
    width: 185px;
    height: 36px;
    line-height: 18px;
  }
  .progress-wrapper {
    position: relative;
    height: 6px;
    background: #eee;
    border-radius: 3px;
  }
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    .bg-1();
  }
  .circle {
    width: 16px;
    height: 16px;
    background: url("../assets/imgs/unselected@3x.png");
    background-size: 100% 100%;
  }
  .circle-selected {
    width: 16px;
    height: 16px;
    background: url("../assets/imgs/selected@3x.png");
    background-size: 100% 100%;
  }
  .power {
    display: inline-block;
    width: 14px;
    height: 14px;
    .bg-image("../../assets/imgs/power");
    background-size: 100% 100%;
  }
  .receive-count {
    display: inline-block;
    width: 14px;
    height: 14px;
    .bg-image("../../assets/imgs/receive");
    background-size: 100% 100%;
  }
  .in-progress {
    width: 50px;
    height: 20px;
    border-radius: 5px;
    .bg-1();
  }
  .copy {
    width: 60px;
    height: 23px;
    border: 1px solid rgba(210, 210, 210, 1);
    border-radius: 12px;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0.7;
  }
}
</style>